<template>
  <el-tabs :value="informUpdate?options[0].sortMainTableNo:activeName" type="card" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in options"
      :label="item.label"
      :name="item.sortMainTableNo"
      :key="item.recNo"
    ></el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  props: {
    options: {
      type: Array
    },
    activeName: {
      type: String
    },
    loading: {
      type: Boolean
    },
    informUpdate: {
      type: Boolean
    }
  },
  data () {
    return {
      tabs: []
    };
  },
  methods: {
    handleClick (tab) {
      this.$emit("update:loading", true);
      this.$emit("switchTab", tab.name, tab.paneName);
      this.$emit("update:activeName", tab.name);
      this.$emit("update:informUpdate", false);
    }
  }
};
</script>

<style scoped>
::v-deep .el-tabs__header {
  margin-bottom: -1px !important;
}
::v-deep .el-tabs__nav {
  border: none !important;
}
::v-deep .el-tabs__item {
  border: 1px solid #dfe4ed !important;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
  width: 100px;
  white-space: wrap;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-bottom: -5px;
}
</style>